<div class="person-card card-container">
  <img class="person-avatar" [src]="person.avatar" [alt]="person.name" />
  <div class="person-name">{{person.name}}</div>

  <svg class="person-arrow" [hidden]="!person.children?.length" xmlns="http://www.w3.org/2000/svg" width="32"
    height="32" viewBox="0 0 24 24">
    @if (person.children?.length) {
    <path fill="currentColor" d="M12 14.708L6.692 9.4l.708-.708l4.6 4.6l4.6-4.6l.708.708z" />
    }
  </svg>
</div>